<template>
    <div class="box2">
        <el-form
                :model="ruleForm"
                :rules="rules"
                :inline="false"
                ref="ruleForm"
                label-width="240px"
                class="demo-ruleForm"
                size="medium"
        >
            <div class="must">
                <el-form-item label=" 商标注册号：" prop="appNum">
                    <el-input v-model="ruleForm.appNum" placeholder="请填写"></el-input>
                    <div class="inform">
                        <img src="../../assets/imgs/inform.png" alt="通知"/>
                        <div class="content">
                            <span>示例：2515783543</span>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label=" 原注销申请号：" prop="oldApplicationNum">
                    <el-input v-model="ruleForm.oldApplicationNum" placeholder="请填写"></el-input>
                </el-form-item>

                <el-form-item label="商标类别：" prop="addModel">
                    <el-input class="type-number" v-model.number="ruleForm.addModel"
                              placeholder="请填写类别（1-45之间）"></el-input>
                    <div class="informm" style="margin-left:-45%">
                        <img src="../../assets/imgs/inform.png" alt="通知"/>
                        <div class="content">
                            <!-- <span>提示：类别只能是1--45，否则为错误</span> -->
                            <span>以实际商标证书上类别为准</span>
                        </div>
                    </div>
                </el-form-item>

                <el-form-item label="注销商品/服务项目（分类填写）：" prop="cancellationCommodity">
                    <el-input type="textarea" v-model="ruleForm.cancellationCommodity" :rules = "{required:true,validator:RegVerify,trigger:'change'}" style="width:80%"></el-input>
                    <div class="inform">
                        <img src="../../assets/imgs/inform.png" alt="通知"/>
                        <div class="content">
                            <span>提示：商品服务项目间用分号 ; 隔开</span>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item class="upload" label="网上确认书：" prop="afterAmount">
                    <span id="star">*</span>
                    <div class="wangshang">
                        <upfile :callback="setSure">
                            <img :src="img_default['qrfile']" v-if="img_default['qrfile']"
                                 style="width:148px;height:148px;margin-bottom:10px"/>
                        </upfile>
                        <div class="exam-img">
                            <span class="img-inform">
                                <img src="../../assets/imgs/inform.png">
                                <span>示例:</span>
                            </span>
                            <examimg :imgType="7"></examimg>
                        </div>
                    </div>
                    <div>
            <span class="informs">
              请点此
              <a :href="mconfig.host + '/file/download?fileType=4'"
              >下载网上确认书</a
              >,查到相应商标编号并填充
            </span>
                        <br/>
                        <span class="notice">请将下载的网上确认书填写完成, 然后上传JPG文件或是PNG文件</span
                        >
                    </div>
                </el-form-item>

                <el-form-item label="其他附件：" prop="dengjichenluofile">
                <uploads :callback="backUrl" :delUrl="delUrl" :file_config="{field:'dengjichenluofile'}" :list="ruleForm.dengjichenluofile"></uploads>
                <div class="inform">
                    <img src="../../assets/imgs/inform.png" alt="通知" />
                    <div class="content">
                    <span>提示：其他附件</span>
                    </div>
                </div>
                </el-form-item>


                <el-form-item label="未交回原注册证原因：" prop="reasonsWithdrawal">
                    <el-input type="textarea" :append="$store.state.alterData.append"
                              v-model="ruleForm.reasonsWithdrawal" style="width:80%"></el-input>
                </el-form-item>
                <el-form-item label="是否共有商标：" prop="isComm">
                    <el-radio class="input" v-model="ruleForm.isComm" @change="radioAnniu" :label="1">是</el-radio>
                    <el-radio class="input" v-model="ruleForm.isComm" :label="0">否</el-radio>
                </el-form-item>
                <div v-if="ruleForm.isComm == 1" class="common">
                    <el-form-item label="其他共有人：">
                        <both :callback="getBoth" :append="$store.state.alterData.append" style="width:80%"
                              :class_id="$route.query.id"></both>
                    </el-form-item>
                </div>

                <div class="line"></div>
                <el-form-item>
                    <div class="btns">
                        <el-button type="info" @click="outStep">上一步</el-button>
                        <el-button type="primary" @click="submitCheck('ruleForm')">提交并审核</el-button>
                    </div>
                </el-form-item>
                <el-dialog
                        class="dialog"
                        :show-close="false"
                        :center="true"
                        :visible.sync="dialogVisible"
                        width="460px"
                >
                    <div class="hint">
                        <img src="../../assets/imgs/branch.png" alt="提示图片"/>
                        <span>选择您想去办理的网点</span>
                    </div>
                    <el-form-item label="选择网点：" prop="branchNetworkId">
                        <el-select style="margin-left:-10px" v-model="ruleForm.branchNetworkId" placeholder="请选择">
                            <el-option
                              v-for="item in options"
                              :key="item.deptId"
                              :label="item.deptName"
                              :value="item.deptId"
                            >
                              <span style="float: left">{{ item.deptName }}</span>
                              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.address }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="info" @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
                    </div>
                </el-dialog>
                <el-dialog
                        class="hintMsg"
                        :show-close="false"
                        title="温馨提示"
                        :visible.sync="centerDialogVisible"
                        width="462px"
                        @close="skip"
                >
                    <span>您的信息已提交，工作人员将在3-5日内对你的信息审核，审核通过后即可预约业务，审核结果将通过短信的方式发送给你。</span>
                    <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="skip">确 定</el-button>
          </span>
                </el-dialog>
            </div>
        </el-form>
    </div>
</template>
<script>
    import upfile from "../common/upfile.vue";
    import both from "../common/both.vue";
    import examimg from "../common/imgExample";
    import uploads from "../common/uploads";
    export default {
        name: "BashStepForm19",
        data() {
            return {
                uploadImg: false,
                stairmodel: [], //类别
                secondmodel: [],
                creditCheckFlg: [],
                //网点列表
                options: [],
                //提交成功弹出框变量
                centerDialogVisible: false,
                //网点弹出框控制变量
                dialogVisible: false,
                //提交表单
                formData: new FormData(),
                // 注销商品/服务项目是否选择
                serveCheck: false,
                //表单唯一id
                classId: "",
                //共有人模板
                common: [],
                //共有人模板
                commonModel: {
                    name: "名称(中文)：",
                    englishName: "(英文)：",
                    site: "地址(中文)：",
                    englishSite: "(英文)：",
                    value: "",       // 中文名称
                    englishValue: "",   // 英文名称
                    siteValue: "",     // 中文地址
                    englishSiteValue: "", // 英文地址
                },
                // 实际模板
                modelcommon: {
                    partNameCh: "",
                    partNameEn: "",
                    partAddrCh: "",
                    partAddrEn: "",
                },
                commonData: [],
                //填写的信息
                ruleForm: {
                    // contacts: "", //联系人
                    ageName: "", //代理机构名称
                    appNum: "", //商标注册号
                    cancellationCommodity: "", //未提交分类填写
                    reasonsWithdrawal: "", //未交回原注册证原因
                    isComm: 0, //是否商标
                    addModel: "", //类别
                    oldApplicationNum: "",
                    qrfiles_status: '',//网上确认书验证字段
                    upload: "",
                    commonArr: [],
                    dengjichenluofile:[],
                    branchNetworkId: "", //网点编号
                },

                rules: {
                    // contacts: [
                    //   { required: true, message: "选项不能为空", trigger: "blur" },
                    //   {
                    //     pattern: /^[\u4E00-\u9FA5]{2,5}$/,
                    //     message: "请输入正确的中文名称",
                    //     trigger: "blur",
                    //   },
                    // ],
                    appNum: [
                        {
                            required: true,
                            message: "请输入商标注册号",
                            trigger: "blur",
                        },
                        {
                            pattern: /^[A-Za-z0-9]{0,30}$/,
                            message: "请输入正确的商标注册号",
                            trigger: "blur",
                        },
                    ],
                    // dengjichenluofile: [
                    // { required: true, message: "附件不能为空", trigger: "change" },
                    // ],
                    isComm: [
                        {required: true, message: "选项不能为空", trigger: "change"},
                    ],
                    addModel: [
                        {required: true, message: "请输入商标类别", trigger: "change"},
                        {
                            pattern: /^\d{0,2}$/,
                            message: "请输入正确的商标类别",
                            trigger: "blur",
                        }
                    ],
                    cancellationCommodity: [
                        {required: true, message: "注销商品/服务项目不能为空", trigger: "blur"},
                        {
                            pattern: /^.{2,}$/,
                            message: "您输入长度不符合要求",
                            trigger: "blur",
                        },
                    ],
                    reasonsWithdrawal: [
                        {required: true, message: "选项不能为空", trigger: "change"},
                    ],
                    oldApplicationNum: [
                        {
                            required: true,
                            message: "请输入申请号",
                            trigger: "blur",
                        },
                        {
                            pattern: /^.{0,30}$/,
                            message: "请输入正确的申请号",
                            trigger: "blur",
                        },
                    ],
                    // upload: [
                    //   { required: true, message: " ", trigger: "change" },
                    // ],
                },
                img_default: {},
            };
        },
        components: {upfile, both,uploads, examimg},
        mounted() {
            //获取从存储在路由中的classId
            this.classId = this.$route.query.id;
            //获取网点列表
            this.$http.get("trademark/system/dept/findDept").then((res) => {
                this.options = res.data.data;
            });
            this.$http.get("trademark/tradeCategory/p").then((res) => {
                this.stairmodel = res.data.data;
            });
            if (this.$store.state.alterData.public) {
                let formDa = {};
                Object.assign(
                    formDa,
                    this.$store.state.alterData.data,
                    this.$store.state.alterData.public
                );
                //console.log(formDa);
                let {
                    // contacts, //联系人
                    proxyOrganizationName, //代理机构名称
                    registNum,
                    isComm, //是否共有商标
                    oldApplicationNum, //原注销申请号
                    reasonsWithdrawal,
                    addModel, //类别
                    otherfile,
                    creditCheckFlg, //注销商品/服务项目（分类填写）
                    qrfile, //确认书
                    cancellationCommodity,
                    appNum,
                    branchNetworkId
                } = formDa;
                this.ruleForm.cancellationCommodity = JSON.parse(cancellationCommodity);
                this.ruleForm["dengjichenluofile"] = JSON.parse(otherfile);
                // this.ruleForm.cancellationCommodity = cancellationCommodity;
                this.ruleForm.appNum = appNum;
                // (this.ruleForm.contacts = contacts), //联系人
                (this.ruleForm.appNum = appNum),
                    (this.ruleForm.isComm = isComm * 1), //是否共有商标
                    (this.ruleForm.oldApplicationNum = oldApplicationNum), //外国受让人的国内接收人
                    (this.ruleForm.addModel = Number(addModel)), //类别
                    (this.ruleForm.reasonsWithdrawal = reasonsWithdrawal), //类别
                    (this.ruleForm.branchNetworkId = branchNetworkId); //网点编号
                this.uploadImg = true
                if (qrfile) {
                    this.img_default.qrfile = this.mconfig.host + qrfile;
                }
                this.ruleForm.qrfiles_status = "1";
                // this.common = commdata;
                //回显共有人append
                if (this.$store.state.alterData.append) {
                    this.$store.state.alterData.append.forEach((item) => {
                        let objCommom = JSON.parse(JSON.stringify(this.modelcommon));
                        this.ruleForm.commonArr.push(objCommom);
                        let objValue = JSON.parse(JSON.stringify(this.commonModel));
                        objValue.value = item.partNameCh;
                        objValue.englishValue = item.partNameEn;
                        objValue.siteValue = item.partAddrCh;
                        objValue.englishSiteValue = item.partAddrEn;
                        this.common.push(objValue);
                    });
                }
                let append = this.$store.state.alterData.append;// 共有人信息json
            }
        },
        watch: {
            // "ruleForm.addModel"(newsval, oldval) {
            //   if (newsval != oldval) {
            //     this.$http.get(`trademark/tradeCategory/s/${newsval}`).then((res) => {
            //       this.secondmodel = res.data.data;
            //       if(this.$store.state.stateJdg){
            //         for(let i = 0; i < this.ruleForm.cancellationCommodity.length; i++){
            //           for(let j = 0; j < this.secondmodel.length; j++){
            //             if(this.ruleForm.cancellationCommodity[i] == this.secondmodel[j].id){
            //               this.$set(this.ruleForm.cancellationCommodity, i, this.secondmodel[j].category)
            //             }
            //           }
            //         }
            //         this.creditCheckFlg = this.ruleForm.cancellationCommodity
            //       }
            //     });
            //   }
            // },
            common: {
                handler(newName, oldName) {
                    this.common.forEach((item, index) => {
                        this.ruleForm.commonArr[index].partNameCh = item.value;
                        this.ruleForm.commonArr[index].partNameEn = item.englishValue;
                        this.ruleForm.commonArr[index].partAddrCh = item.siteValue;
                        this.ruleForm.commonArr[index].partAddrEn = item.englishSiteValue;
                    });
                },
                deep: true,
            },
            //  监听判断是否执行新增变更人
            // "ruleForm.isComm":function(val){
            //     if(val == 1){
            //       if(this.ruleForm.commonArr.length == 0 || this.$store.state.stateJdg==false){
            //         this.plus()
            //       }
            //     }else{ this.ruleForm.commonArr == [] }
            // }
        },
        methods: {
            // radioChange(){
            //   if(this.ruleForm.isComm == "1"){
            //     if(this.common.length == 0){
            //       this.plus();
            //     }
            //   }
            // },
            backUrl(url,file_config){
                this.ruleForm[file_config["field"]].push(url)
            },
            delUrl(index,file_config){
                this.ruleForm[file_config["field"]].splice(index,1)
                this.$set(this.ruleForm,file_config["field"],this.ruleForm[file_config["field"]])
            },
            RegVerify(value){
                if(value.replace(/(^\s+)|(\s+$)/g)){
                    this.ruleForm.cancellationCommodity=value.replace(/(^\s+)|(\s+$)/g,"");
                }
            },
            // 提交并审核验证
            getBoth(value){
                console.log(value, 145645)
                this.commonData = value;
            },
            submitCheck(formName) {
                // console.log(this.ruleForm.qrfiles);
                // if(this.ruleForm.addModel != ""){
                //   if(this.ruleForm.cancellationCommodity.length > 0 ){
                //     this.serveCheck = true
                //   }else{
                //     this.open1("请选择注销商品/服务项目", "error")
                //     return
                //   }
                // }
                this.$refs[formName].validate((valid) => {
                    if (valid && this.uploadImg == true) {
                        this.dialogVisible = true;
                        // if(this.ruleForm.radio==1){
                        //   this.ruleForm.commonArr.forEach((item) =>{
                        //     if(item.partAddrCh == '' || item.partNameCh == ''){
                        //       this.open1("共有人名称(中文)或共有人地址(中文)不能为空", "error");
                        //       this.dialogVisible = false;
                        //     }else{
                        //       this.dialogVisible = true;
                        //     }
                        //   })
                        // }else{
                        //   this.dialogVisible = true;
                        // }
                    } else if (this.uploadImg == false) {
                        this.open1("请上传网上确认书", "error");
                    } else {
                        this.open1("请完整填写表单数据", "error");
                    }

                });
            },
            // 上传网上确认书
            setSure(files) {
                // if(files.length > 0){
                //   this.ruleForm.upload = "1"
                //   this.ruleForm.qrfiles = files[0];
                // }else{
                //   this.ruleForm.upload = ""
                //   this.ruleForm.qrfiles = ""
                // }
                // this.img_default = {};
                if (files.length > 0) {
                    this.ruleForm.qrfiles_status = "1"
                } else {
                    this.ruleForm.qrfiles_status = ""
                }
                this.ruleForm.qrfile = files[0]
                if (this.ruleForm.qrfile) {
                    this.uploadImg = true
                } else {
                    this.uploadImg = false
                }
            },
            // handleCheckedCitiesChange(value) {
            //   let arr = [];
            //   this.secondmodel.forEach((item) => {
            //     value.forEach((i) => {
            //       console.log(i);
            //       if (item.category == i) {
            //         arr.push(item.category);
            //       }
            //     });
            //   });
            //   this.ruleForm.cancellationCommodity = arr;
            // },
            //返回上一步
            outStep() {
                this.$emit("wp", 1, "请填写申请业务信息");
            },
            //提示模板
            open1(msg, types = "success") {
                this.$message({
                    message: msg,
                    type: types,
                });
            },
            //表单提交事件
            submitForm(formName) {
                let _this = this;
                if (this.ruleForm.branchNetworkId != "") {
                    //每次提交重新生成新的FormData用于储存新的数据
                    this.formData = new FormData();
                    this.dialogVisible = false;
                    /*************************************公共数据开始******************************************/
                    let arr = this.$store.getters.getRuleForm;
                    for (let key in arr) {
                        this.formData.append(key, arr[key]);
                    }
                    /*************************************公共数据结束******************************************/

                    /*************************************需要提交的数据开始******************************************/
                    this.formData.append("addModel", this.ruleForm.addModel);
                    this.formData.append("ageName", this.ruleForm.ageName);
                    this.formData.append("appNum", this.ruleForm.appNum);
                    this.formData.append("classId", this.classId);
                    this.formData.append("otherfile", JSON.stringify(this.ruleForm.dengjichenluofile));
                    this.formData.append(
                        "oldApplicationNum",
                        this.ruleForm.oldApplicationNum
                    );
                    console.log(this.ruleForm.branchNetworkId);
                    this.formData.append(
                        "branchNetworkId",
                        this.ruleForm.branchNetworkId
                    );
                    // this.formData.append("contacts",this.ruleForm.contacts);
                    this.formData.append("isComm", JSON.stringify(this.ruleForm.isComm));
                    this.formData.append("optype", 1);
                    // this.formData.append("phone", phone);
                    // this.formData.append("postCode", postal);
                    // this.formData.append(
                    //   "proAppends",
                    //   this.ruleForm.isComm == 0 ? "" : JSON.stringify(this.ruleForm.commonArr)
                    // );
                    this.formData.append(
                        "proAppends",
                        JSON.stringify(this.commonData) // 其他共有人
                    );
                    this.formData.append(
                        "reasonsWithdrawal",
                        this.ruleForm.reasonsWithdrawal
                    );
                    if (this.img_default["qrfile"]) {
                        this.formData.append("qrfiles", {});
                    } else {
                        this.formData.append("qrfiles", this.ruleForm.qrfile);
                    }

                    // if(this.$store.state.stateJdg){
                    //   for(let i = 0; i < this.ruleForm.cancellationCommodity.length; i++){
                    //     for(let j = 0; j < this.secondmodel.length; j++){
                    //       if(this.ruleForm.cancellationCommodity[i] == this.secondmodel[j].category){
                    //         this.ruleForm.cancellationCommodity[i] = this.secondmodel[j].category
                    //       }
                    //     }
                    //   }
                    // }
                    this.formData.append(
                        "cancellationCommodity",
                        JSON.stringify(this.ruleForm.cancellationCommodity)
                    );

                    /*************************************需要提交的数据结束******************************************/

                    let urls = "";
                    if (this.$store.state.alterData.public) {
                        this.formData.append("id", this.$store.state.alterData.public.id);
                        urls = "trademark/tca/modifyNoCommit";
                    } else {
                        urls = "trademark/tca/firstSubmit";
                    }
                    //配置请求头
                    var config = {
                        header: {
                            "Content-Type": "multipart/form-data",
                        },
                    };

                    // axios向后端发送数据
                    this.$http
                        .post(urls, this.formData, config)
                        .then(function (response) {
                            //console.log(response);
                            //若状态码不为200则不跳转
                            if (response.data.code != 200) {
                                _this.open1("提交失败", "error");
                                return;
                            }

                            _this.centerDialogVisible = true;
                        })
                        .catch(function (error) {
                        });
                } else {
                    this.open1("请选择网点编号", "error")
                    return false;
                }
            },
            //跳转函数
            skip() {
                this.centerDialogVisible = false;
                this.open1("操作成功");
                this.$router.push({
                    path: "/business/myBusiness/auditing",
                });
            },
            //点击添加更变许可人
            plus() {
                let objCommom = JSON.parse(JSON.stringify(this.modelcommon));
                this.ruleForm.commonArr.push(objCommom);
                let objValue = JSON.parse(JSON.stringify(this.commonModel));
                this.common.push(objValue);
                if (this.common.length != 0) {
                    this.ruleForm.radio = 1;
                }
            },
            // dele() {
            //   this.common.pop();
            // },
            dele() {
                this.common.pop();
                this.ruleForm.commonArr.pop();
                if (this.common.length == 0) {
                    this.ruleForm.isComm = 0;
                }
            },
            radioAnniu() {
                if (this.ruleForm.isComm == 1) {
                    if (this.common.length == 0) {
                        this.plus();
                        return
                    }
                }
            },
        },
    };
</script>
<style lang="less" scoped>
    .btns {
        display: flex;
        justify-content: center;
        .el-button {
            margin: 0 20px;
        }
    }

    .box2 {
        display: flex;
        padding-right: 280px;
        flex-direction: column;
        align-items: center;
        // margin-top: 100px;
        width: 100%;
        min-height: 800px;
        .tle {
            font-size: 24px;
            color: #000;
        }
        .el-form {
            width: 100%;
            .el-input {
                width: 80%;
            }
        }
        .appends-btn {
            width: 100%;
            text-align: center;
        }
        .must,
        .select {
            display: flex;
            position: relative;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 30px 0 30px;
            margin-bottom: 80px;
            width: 100%;
            // border: 1px solid #bbbbbb;
            border-radius: 10px;
            .el-form-item {
                width: 680px;
            }
            .inline {
                display: flex;
                .el-form-item {
                    margin: 0;
                    width: 290px !important;
                }
            }
        }
        .must {
            margin-bottom: 20px;
        }
        .line {
            width: calc(100% - 280px);
            margin: 10px auto;
            height: 1px;
            border-top: 1px dashed #d9d9d9;
        }
        .imgHint {
            margin: 5px;
            font-size: 12px;
            line-height: 17px;
            color: #f96900;
        }
        .affirm {
            font-size: 12px;
            color: #a0a3a5;
            a {
                text-decoration: none;
                color: #3685ff;
            }
        }
        // .input {
        //   width: 190px;
        // }
        .upload {
            margin: 20px 0;
        }
        .type-number {
            width: 250px;
        }
        .informs {
            // position: absolute;
            width: 500px;
            font-size: 12px;
            color: #a0a3a5;
            a {
                text-decoration: none;
                color: #3685ff;
            }
        }
        .inform {
            display: flex;
            align-items: center;
            position: absolute;
            top: 0;
            left: 80%;
            width: 300px;
            height: 32px;
            color: #f96900;
            font-size: 10px;
            line-height: 14px;
            img {
                margin: 11px;
            }
            .content {
                display: flex;
                flex-direction: column;
                .ts {
                    text-indent: 3em;
                }
            }
        }
        .notice {
            color: #f96900;
            font-size: 12px;
        }
        .tle {
            list-style: none;
            margin: 40px 0 20px;
            font-size: 24px;
            & ~ .tle {
                color: #bbb;
            }
        }
        .hint {
            color: #f96900;
            background-color: #fff;
            .el-form-item__label {
                width: 150px;
            }
            img {
                width: 20px;
            }
        }
        .el-steps {
            width: 70%;
            height: 200px;
        }
        .el-button {
            //display: block;
            display: inline;
            margin: 0 20px;
            // background-color: #67c23a !important;
            // border-color: #67c23a !important;
        }

        .common .el-button {
            background-color: #fff !important;
            border-color: #bbb !important;
        }
    }

    .dialog-footer {
        display: flex;
        justify-content: space-between;
        color: #fff;
        .lan {
            background-color: #2c9dfc !important;
            border-color: #2c9dfc !important;
        }
    }

    .dialog /deep/ .el-form-item__label {
        width: 100px !important;
    }

    .dialog /deep/ .el-form-item__content {
      display: flex;
      justify-content: left;
      margin-left: 100px !important;
    }

    .dialog /deep/ .el-input {
        width: 250px;
    }

    .el-checkbox-group {
        line-height: 14px;
    }

    // .is-checked/deep/.el-radio__inner,
    // .is-checked/deep/.el-checkbox__inner {
    //   border-color: #999999;
    //   background: #999999;
    // }
    .el-radio /deep/ .el-radio__inner:hover {
        border-color: #999999 !important;
    }

    .is-checked /deep/ .el-radio__label,
    .is-checked /deep/ .el-checkbox__label {
        color: #333;
    }

    .is-focus .el-checkbox__inner {
        border-color: #999999 !important;
    }

    .el-checkbox /deep/ .el-checkbox__inner:hover {
        border-color: #999999 !important;
    }

    .el-step__head.is-process {
        border-color: #f96900;
        color: #f96900 !important;
    }

    .hintMsg {
        /deep/ .el-dialog__header {
            display: flex;
            justify-content: center;
            font-weight: bold;
        }
        .dialog-footer {
            justify-content: center;
            .el-button {
                border-color: #2c9dfc !important;
                background: #2c9dfc !important;
            }
        }
    }

    /deep/ .el-dialog.el-dialog--center /deep/ {
        .el-dialog__header {
            padding: 0;
        }

        .el-dialog__body {
            padding: 20px 20px 50px;
        }

        .hint {
            color: #F96900;
            background-color: #fff;
            padding: 0;
            padding-bottom: 20px;
        }

        .el-button {
            margin: 0;
        }

        .el-form-item__label {
            width: 86px !important;
        }
    }

    #star {
        position: absolute;
        color: red;
        margin-left: -105px;
    }

    .informm {
        display: flex;
        align-items: center;
        position: absolute;
        top: 0;
        left: 125%;
        width: 250px;
        height: 32px;
        color: #F96900;
        font-size: 10px;
        line-height: 14px;
        margin-left: -20%;

        img {
            margin: 11px;
        }

        .content {
            display: flex;
            flex-direction: column;
            position: relative;

            .ts {
                text-indent: 3em;
            }
        }
    }
      .exam-img{
        position: absolute;
        top: 0;
        left: 430px;
        }
        .img-inform{
        img{
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -140px;
            transform: translate(-50%,-50%);
        }
        span{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            white-space: nowrap;
            margin-left: -100px;
            width: 50px;
            color: #f96900;
        }
        }
.wangshang{
    display: flex;
}
</style>